<template>
	<view class="template-view">
		<view class="row">
			<view class="item" v-for="(item,index) in data01" :key="item.id" @click="openShop(item.id)">
				<image :src="$wanlshop.oss(item.avatar, 172, 0, 1)" mode="aspectFill" class="img"></image>
				<text class="name u-line-1">{{item.shopname}}</text>
			</view>
		</view>
		<view class="row">
			<view class="item" v-for="(item,index) in data02" :key="item.id" @click="openShop(item.id)">
				<image src="@/static/images/more.png" mode="aspectFill" class="img" v-if="item.shopname === '更多'"></image>
				<image :src="$wanlshop.oss(item.avatar, 172, 0, 1)" mode="aspectFill" class="img" v-else></image>
				<text class="name u-line-1">{{item.shopname}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "jingangqu",
		data() {
			return {
				data01: [],
				data02: []
			};
		},
		created() {
			this.loadData()
		},
		methods: {
			async loadData() {

				await uni.request({
					url: '/wanlshop/shop/get_hot_shop',
					success: res => {
						const list = res.data
						if (list.length <= 4) {
							this.data01 = list
							this.data02 = []
						} else {
							this.data01 = list.splice(0, 4);
							this.data02 = list.splice(0, 3);
							if (this.data02.length === 3) {
								this.data02.push({
									id: 0,
									shopname: "更多",
								})
							}

						}
					}
				});
			},
			openShop(id) {
				if (id) {
					uni.navigateTo({
						url: `/pages/shop/index?id=${id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/shop/list`
					})

				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.template-view {
		background-color: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		padding-bottom: 10rpx;

		.row {
			display: flex;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				padding: 10rpx;

				.img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}

				.name {
					font-size: 24rpx;
					text-align: center;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>